//需求：当点击楼梯按钮的时候，给对应的按钮加active 

//2、当点击楼梯的时候对应的页面跟随移动
$(function() {



    var top_list = [];
    let $floors = $(".floor");
    let animate = false;

    //遍历，让数组中存在卷动楼梯的高度值
    $.each(
            $floors,
            function(index, ele) {
                top_list.push($(ele).offset().top);
            }
        )
        // console.log(top_list);



    $(".floor-nav li").click(function() {
        changeClass.call(this);

        //点击楼梯对应页面跟随移动
        var index = $(this).index(".floor-nav li");
        animate = true;
        changeScrollTop(index);
    })

    function changeClass() {
        $(this)
            .addClass("active")
            .siblings()
            .removeClass("active");
    }

    function changeScrollTop(index) {
        // console.log(index);

        $("body,html")
            .animate({
                scrollTop: top_list[index] + 2
            }, function() {
                animate = false;
            })
    }

    //当页面滚动的时候，楼梯的对应样式跟随变化

    //节流
    $(window).scroll(
        function() {



            // 如果不运动的时候
            if (!animate) {
                var index = getIndex();
                // console.log(index);
                changeBtnClass(index);

            }
        }
    )

    function getIndex() {
        //获取当前位置的距顶值
        var scrollTop = $("html,body").scrollTop();

        if (scrollTop >= top_list[top_list.length - 1]) {
            return top_list.length - 1;
        }

        for (let i = 0; i < top_list.length; i++) {
            if (scrollTop >= top_list[i] && scrollTop < top_list[i + 1]) {
                return i;
            }

        }
    }

    function changeBtnClass(index) {
        $(".floor-nav li")
            .removeClass("active")
            .eq(index)
            .addClass("active");
    }

    $(window).trigger("scroll")





})